<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      :width="650"
      :footer="null"
      @cancel="cancel"
    >
      <a-form :label-col="{ span: 6 }">
        <a-form-item label="获取方式">
          <a-radio-group v-model:value="modelRef.poi_type">
            <!-- <a-radio :value="1">快速提取抖音POI_ID</a-radio> -->
            <a-radio :value="2">手动输入POI_ID</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="抖音地址"
          v-bind="validateInfos.poiIdAddress"
          v-if="modelRef.poi_type == 1"
        >
          <template #extra>
            <span @click="poiTutorial" style="color: #2878ffff; cursor: pointer"
              >查看快速提取抖音POI_ID使用说明</span
            >
          </template>
          <a-input
            v-model:value="modelRef.poiIdAddress"
            placeholder="请粘贴抖音地址链接"
            style="width: 100%"
          />
          <a-button
            type="primary"
            style="
              background: #2878ff;
              border: none;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
            "
            :loading="poiLoading"
            @click="getPOI"
            v-if="false"
            >一键获取</a-button
          >
        </a-form-item>
        <a-form-item label="POI_ID" v-bind="validateInfos.poi_id">
          <template #extra v-if="modelRef.poi_type == 2">
            <span @click="poiTutorial" style="color: #2878ffff; cursor: pointer"
              >查看POI_ID获取方法</span
            >
          </template>
          <a-input
            v-model:value="modelRef.poi_id"
            :disabled="modelRef.poi_type == 1"
            placeholder="位置POI_ID"
            :style="{
              width: modelRef.poi_type == 1 ? '100%' : '300px',
            }"
            style="width: 100%"
          />
          <a-button
            type="primary"
            style="
              background: #2878ff;
              border: none;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
            "
            @click="getPOI"
            v-if="false"
            >一键获取</a-button
          >
        </a-form-item>
        <a-form-item label="位置名称" v-bind="validateInfos.store_name">
          <a-input
            v-model:value="modelRef.store_name"
            placeholder="请输入位置名称"
          />
        </a-form-item>
        <a-form-item label="位置地址" v-bind="validateInfos.store_address">
          <a-textarea
            v-model:value="modelRef.store_address"
            show-count
            :maxlength="50"
            placeholder="请输入位置地址"
          />
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-space>
          <a-button
            @click="cancel"
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            >取消</a-button
          >
          <a-button
            type="primary"
            style="background: #2878ff; border: none; border-radius: 5px"
            @click="submitClick"
            :loading="loading"
            >确定</a-button
          >
        </a-space>
      </div>
    </a-modal>

    <!-- poi教程 -->
    <POITutorial
      :visible="visiblePOITutorial"
      :imgeUrl="tutorialUrl"
      @onCancel="visiblePOITutorial = false"
    />
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  watch,
  defineComponent,
  computed,
  onMounted,
} from "vue";
import { Form, message } from "ant-design-vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import POITutorial from "./modules/POITutorial.vue";
import request from "../../../../common/utils/request";
import utils from "@/common/utils/utils.js";
const useForm = Form.useForm;
export default defineComponent({
  name: "AddPOI",
  components: { POITutorial },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      loading: false,
      visiblePOITutorial: false,
      tutorialUrl:
        utils.staticPath + "images/workAi/shotstack/home/explain.png", //查看获取方法图片地址
      poiLoading: false,
      visible: false, //控制弹窗显示隐藏
      detailId: null,
    });

    const modelRef = reactive({
      poi_type: 2,
      poiIdAddress: "",
      poi_id: "",
      store_name: "",
      store_address: "",
    });
    const showModal = (info) => {
      console.log(info, "详情");
      if (info && info.id) {
        state.detailId = info.id;
        getPolDetail(info.id); //获取详情
      }
      state.visible = true; //打开弹窗
    };
    // 获取表单详情
    const getPolDetail = (id) => {
      if (id) {
        request
          .get("/work_ai", "/user/shotstack/poi/detail", {
            id: id,
          })
          .then((res) => {
            console.log(res, "kekekkek");
            if (res) {
              modelRef.store_address = res.result.store_address;
              modelRef.poi_id = res.result.poi_id;
              modelRef.store_name = res.result.store_name;
            }
            console.log(modelRef);
          })
          .catch((err) => {})
          .finally(() => {});
      }
    };
    const rulesRef = reactive({
      poiIdAddress: [
        {
          required: true,
          message: "请输入抖音地址",
        },
      ],
      poi_id: [
        {
          required: true,
          message: "请输入POI_ID",
        },
      ],
      store_name: [
        {
          required: true,
          message: "请输入门店名称",
        },
      ],
      store_address: [
        {
          required: true,
          message: "请输入门店地址",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const getPOI = () => {
      if (modelRef.poi_type == 1) {
        if (!modelRef.poiIdAddress) {
          message.warn("请输入抖音地址");
          return;
        }
        state.poiLoading = true;
        request
          .get("/work_ai", "/user/shotstack/poi/info", {
            share_url: modelRef.poiIdAddress,
          })
          .then((res) => {
            modelRef.poi_id = res.result.poi_id;
            state.poiLoading = false;
          });
      }
    };
    // 取消
    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };
    // 确定
    const submitClick = () => {
      validate().then(() => {
        if (modelRef.poi_type == 2) {
          modelRef.poiIdAddress = undefined;
        }
        modelRef.merchant_library_id = 0;
        state.loading = true;
        let paramsObj = {
          poi_id: modelRef.poi_id,
          store_name: modelRef.store_name,
          store_address: modelRef.store_address,
          poi_type: 1,
        };
        if (state.detailId) {
          paramsObj.id = state.detailId;
          request
            .put("/work_ai", "/user/shotstack/poi/update", paramsObj)
            .then((res) => {
              message.success("修改成功");
              resetFields();
              emit("onSubmit");
              state.visible = false;
              state.detailId = null;
              state.loading = false;
            })
            .catch(() => {
              state.loading = false;
            });
          return;
        } else {
          request
            .post("/work_ai", "/user/shotstack/poi/add", paramsObj)
            .then((res) => {
              message.success("添加成功");
              resetFields();
              state.visible = false;
              emit("onSubmit");
              state.loading = false;
            })
            .catch(() => {
              state.loading = false;
            });
        }
      });
    };

    const poiTutorial = () => {
      state.visiblePOITutorial = true;
    };

    const getPoiDetail = () => {
      request
        .get("/work_ai", "/user/shotstack/poi/detail", { id: props.id })
        .then((res) => {
          console.log(res);
          sendModelRef(res.result);
        });
    };

    const sendModelRef = (state) => {
      for (let key in state) {
        modelRef[key] = state[key];
      }
    };

    const title = computed(() => {
      return state.detailId ? "编辑POI" : "添加POI";
    });

    watch(
      () => modelRef.poi_type,
      (val) => {
        if (val == 2) {
          if (!props.id) {
            modelRef.poiIdAddress = "";
            modelRef.poi_id = "";
          }

          rulesRef.poiIdAddress[0].required = false;
          state.tutorialUrl =
            utils.staticPath + "images/workAi/shotstack/home/explain.png";
        } else {
          if (!props.id) {
            modelRef.poiIdAddress = "";
            modelRef.poi_id = "";
          }

          rulesRef.poiIdAddress[0].required = true;
          state.tutorialUrl =
            utils.staticPath + "images/workAi/shotstack/home/explain.png";
        }
      },
      {
        immediate: true,
      }
    );

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (!props.id) {
            resetFields();
          } else {
            getPoiDetail();
          }
        }
      }
    );
    const cancel = () => {
      resetFields();
      state.detailId = null;
      state.visible = false;
    };
    return {
      ...toRefs(state),
      showModal,
      cancel,
      validateInfos,
      modelRef,
      cancelClick,
      submitClick,
      poiTutorial,
      title,
      getPOI,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
